<template>
  <div>
    <!-- <div :class=" tan? 'hidden':''"></div> -->
    <el-dialog title="体检历史记录"
    width="1300px"  :visible.sync="dialogTableVisible">
      <div class="tab_box">
      <div class="box_t">
          <el-form :inline="true" :model="formed" ref="ruleFormed" :rules="rulesed">
              <el-form-item label="姓名" style="white-space: nowrap;" :label-width="formLabelWidth"  prop="chineseName">
                <el-input @input="bindName" class="input_c" v-model="formed.roleName" clearable></el-input>
              </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth"  prop="chineseName">
              <el-input @input="bindSex" class="input_c" v-model="formed.roleSex" clearable ></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth"  prop="chineseName">
              <el-input @input="bindAge" class="input_c" v-model="formed.roleAge" clearable ></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth"  prop="chineseName">
              <el-input @input="bindPhone" class="input_c" v-model="formed.rolePhone" clearable ></el-input>
            </el-form-item>
            <el-form-item label="单位" :label-width="formLabelWidth"  prop="chineseName">
              <el-input @input="bindUnit" class="input_c" v-model="formed.roleUnit" clearable ></el-input>
            </el-form-item>
            <el-form-item label="最近体检时间" :label-width="formLabelWidth"  prop="chineseName">
              <el-date-picker
                v-model="formed.roleTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      <div class="box_th">
        <div class="t_head">体检记录</div>
          <!-- 列表 -->
        <div>
        <el-table
         border
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;margin-top:5px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="odd"
            label="体检单号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="setmeal"
            label="体检套餐">
          </el-table-column>
          <el-table-column
            prop="state"
            label="体检状态"
            width="160">
          </el-table-column>
          <el-table-column
            prop="time"
            label="体检时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="registration"
            label="打印报告时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="diagnosis"
            label="诊断结论"
            width="160">
          </el-table-column>
        </el-table>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            style="margin-top:10px;">
          </el-pagination>
      </div>
      <div class="box_th">
        <div class="t_head">有关来电</div>
          <!-- 列表 -->
        <div>
        <el-table
         border
          ref="multipleTable"
          :data="phoneList"
          tooltip-effect="dark"
          style="width: 100%;margin-top:5px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="serial"
            label="工单流水号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="matter"
            label="事项"
            width="200">
          </el-table-column>
          <el-table-column
            prop="classify"
            label="分类"
            width="160">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            width="160">
          </el-table-column>
          <el-table-column
            prop="calltime"
            label="来电检时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="duration"
            label="通话时长（分钟）"
            width="160">
          </el-table-column>
          <el-table-column
            prop="operator"
            label="操作员"
            width="160">
          </el-table-column>
          <el-table-column
            prop="duration"
            label="操作"
            width="160">
            <template slot-scope="scope">
              <el-button @click="getqueryRolePermissions(scope.row)" size="small">播放录音</el-button>
            </template>
          </el-table-column>
        </el-table>
          </div>
          <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            style="margin-top:10px;">
          </el-pagination> -->
      </div>
    <div style="text-align: right;">
      <el-button @click="dialogTableVisible = false">关 闭</el-button>
    </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    dialogTableVisible:{
      type:Boolean,
      default:false
    }
  },
  data () {
    return {
      tan:true,
      // formLabelWidth:'70px',
      formed: {
        roleName:'',
        roleSex:'',
        roleAge:'',
        rolePhone:'',
        roleUnit:'',
        roleTime:'',
      },
      list:[
          {
            odd:'202111090008',
            setmeal:'E2022男性20项',
            state:'已打印报告',
            time:'2021-11-03 12:20:01',
            reporttime :'2021-11-04 12:20:01',
            registration:'2019-10-10',
            diagnosis:'脂肪肝轻度、高血压',
          },
          {
            odd:'202111090008',
            setmeal:'E2022男性20项',
            state:'已打印报告',
            time:'2021-11-03 12:20:01',
            reporttime :'2021-11-04 12:20:01',
            registration:'2019-10-10',
            diagnosis:'脂肪肝轻度、高血压',
          },
          {
            odd:'202111090008',
            setmeal:'E2022男性20项',
            state:'已打印报告',
            time:'2021-11-03 12:20:01',
            reporttime :'2021-11-04 12:20:01',
            registration:'2019-10-10',
            diagnosis:'脂肪肝轻度、高血压',
          },
        ],
        phoneList:[
          {
            serial:'20211103090001',
            matter:'咨询结果',
            classify:'咨询',
            phone:'13911798103',
            calltime:'2021-11-03 12:20:01',
            duration:'3',
            operator:'李玉',
          },
          {
            serial:'20211103090001',
            matter:'体检预约到2022年12月1号',
            classify:'预约',
            phone:'13911798103',
            calltime:'2021-11-03 12:20:01',
            duration:'3',
            operator:'李玉',
          }
        ]
    }
  }
}
</script>

<style scoped>
  ::v-deep .el-dialog {
    width: 1200px;
    left: 20px;
    top: 0px;
  }
  .box_t {
    margin: 0 20px;
  }
  .t_head {
    font-size: 10px;
  }
  .hidden {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
  .box_th {
    margin: 10px 20px;
  }
   .el-table th.is-leaf {
    /* background: #cccccc; */
}
</style>
